<template>
  <div class="topic" style="background-color: #f4f4f4">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <ul>
        <li v-for="item in list" :key="item.id">
          <img :src="item.scene_pic_url" alt="" />
          <div class="content" >
            <p class="p1">{{item.title}}</p>
            <p class="p2">{{item.subtitle}}</p>
            <p class="p3">{{item.price_info}}元起</p>

            
          </div>
        </li>
      </ul>
    </van-list>
  </div>
</template>

    <script>
import { topic } from "@/api/topic/index.js";
export default {
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      start:1
    };
  },
  computed: {},
//   created() {
//     topic().then((res) => {
//       console.log(res);
//       this.list = res.data;
//     });
//   },
  mounted() {},
  methods: {
    onLoad() {
      topic(
          {
              page:this.start
          }
      ).then((res) => {
        console.log(res);
        this.list.push(...res.data);
        this.loading = false;
        this.start++;
        if (this.start>res.total) {
            this.finished=true;
        }
      });
    },
  },
};
</script>

    <style scoped lang="scss">
img {
  width: 100%;
}
.topic{
    padding-bottom: 50px;
}
.content{
  height: 120px;
  background-color: #fff;
  overflow: hidden;
  .p1{
    color: #333;
    font-size: 17px;
    margin: 15px 0 17px;
  }
  .p2{
    color: #999;
    
    font-size: 12px;
    margin: 8px 0 12px;
    padding: 0 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

  }
  .p3{
    color: #b4282d;
    font-size: 12px;
    
  }
  margin-bottom: 10px;

}
</style>
